<template>
    <van-nav-bar title="返回上一层" left-arrow @click-left="onClickLeft" />
    <van-image width="100%" height="300" :src="productdata.imgurl" @click="onClick" />
    <van-image-preview v-model:show="show" :images="images" @change="onChange">
    </van-image-preview>
    <div class="procs">
        <div style="color: red;">￥<span style="font-size: 22px; font-weight: 800;">{{ productdata.oldprice}}</span>
            <van-icon name="minus" />
            <span style="font-size: 22px; font-weight: 800;">{{ productdata.newprice}}</span>
        </div>
        <div class="title"><van-icon name="hot" color="red" size="25px" />{{ productdata.pname }}</div>
        <div class="subtitle">{{ productdata.subname }}</div>

    </div>
    <!--分享-->
    <van-row style="text-align: center; margin-top: 20px;">
        <van-col span="8">
            <div style="float: left; margin-left: 50px;"> <img
                    src="https://img11.360buyimg.com/img/jfs/t1/185923/19/38125/325/64fad71dFeef526f9/f11f072077880807.png"
                    alt="" width="18" height="18"></div>
            <div style="float: left; font-size: 15px;" @click="fxq">分享</div>
        </van-col>
        <van-col span="8">
            <van-icon name="star" size="20px" /> <span>收藏</span>

        </van-col>
        <van-col span="8">
            <van-icon name="label" /> <span>降价通知</span>
        </van-col>
    </van-row>
    <van-share-sheet v-model:show="showShare" :options="option" />
    <!--选择地区-->
    <van-field v-model="fieldValue" is-link readonly label="送至：" placeholder="请选择所在地区" @click="shows = true" />
    <van-popup v-model:show="shows" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="shows = false"
            @finish="onFinish" />
    </van-popup>
    <!--详情信息-->
    <div>
        <!-- <img src="https://img10.360buyimg.com/imgzone/jfs/t1/275661/5/2660/85507/67d307acF7edc206b/037a9545da339609.jpg"
            alt="" width="100%"> -->
        <div v-html="productdata.description"></div>
    </div>

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button type="warning" @click="onClickIcon" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue';
import { useCascaderAreaData } from '@vant/area-data';
import { ProductApi } from '../../api';
const show = ref(false);
const index = ref(0);
const images = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]);
const id = ref()
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const productdata = reactive({
    pname: '',
    imgurl: '',
    subname: '',
    newprice: '',
    oldprice: '',
    description:''
})
onMounted(() => { 
    console.log(route.query.id);
    id.value = route.query.id
    callProductList()
})

const callProductList = () => { 
    ProductApi.select.call({ id: id.value }).then(res => { 
        console.log(res[0]);
        let result = res[0]
        productdata.pname = result.pname
        productdata.imgurl = result.imgurl
        productdata.subname = result.subname
        productdata.newprice = result.newprice
        productdata.oldprice = result.oldprice
        productdata.description = result.description
        images.value = result.imgurl.split(',')
       
    })
}



const onChange = (newIndex) => {
    index.value = newIndex
};
const onClick = () => {
    show.value = true
};

const showShare = ref(false)
const option = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
];
const fxq = () => {
    showShare.value = true;
}


const shows = ref(false)
const fieldValue = ref('')
const cascaderValue = ref('')
const options = useCascaderAreaData()
const onFinish = ({ selectedOptions }) => {
    show.value = false
    fieldValue.value = selectedOptions.map((option) => option.text).join('/')
}
const onClickIcon = () => { 
   
    console.log('加入购物车');
    
    router.push('/moveCart')
}

const onClickLeft = () => history.back();
</script>

<style scoped>
.procs {
    .title {
        font-size: 20px;
        margin-left: 10px;
        font-weight: 800;
        margin-top: 5px;
    }

    .subtitle {
        font-size: 15px;
        color: #818686;
        font-weight: 700;
        margin: 10px 10px;
    }
}
</style>